<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setState</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
    <!--说明-->
    <!--下面获取数据的url是用easymock模拟的接口，数据如下：
    {
      "data": [{
          "name": "Apple",
          "id": "01"
        },
        {
          "name": "Banana",
          "id": "02"
        },
        {
          "name": "Orange",
          "id": "03"
        }]
    }
    -->
    <div id="root"></div>
    <script type="text/babel">
    //1.引入-请求数据与ui渲染放在一起，显得很臃肿
    // class List extends React.Component{
    //     constructor(){
    //         super()
    //         this.state={names:[]}
    //     }
    //     componentDidMount(){
    //         $.ajax({
    //             url:'https://www.easy-mock.com/mock/5f7537fcafffa44aa69cfefa/data/names',
    //             dataType:'json',
    //             success:function(res){
    //                 this.setState({names:res.data})
    //             }.bind(this)
    //         })
    //     }
    //     render(){
    //         return <ul>
    //             {this.state.names.map(item=>{
    //                 return(
    //                     <li key={item.id}>{item.name}</li>
    //                 )
    //             })}
    //         </ul>
    //     }
    // }
    // ReactDOM.render(<List />,document.getElementById('root'))




    //2.获取数据与ui渲染分离
    //木偶组件
    function ShowList(props){
        return <ul>
            {props.names.map(item=>{
                return <li key={item.id}>{item.name}</li>
            })}
        </ul>
    }

    //智能组件
    class ListContainer extends React.Component{
        constructor(){
            super()
            this.state={names:[]}
        }
        componentDidMount(){
            $.ajax({
                url:'https://www.easy-mock.com/mock/5f7537fcafffa44aa69cfefa/data/names',
                success:function(res){
                    this.setState({names:res.data})
                }.bind(this)
            })
        }
        render(){
            return <ShowList names={this.state.names}/>
        }
    }

    ReactDOM.render(<ListContainer />,document.getElementById('root'))
    </script>
</body>
</html>